@extends('layout.app')
@section('main-content')

        <h1 class="text-center text-4xl">Contact List</h1>
        <a href="{{route('new-contact')}}" class="border rounded inline-block mt-[50px] mr-5 px-5 py-2 bg-sky-700 text-gray-100">New Contact</a>
        <form method="get" class="inline-block">
        <label for="">Search for name: </label>
        <input type="search" class="border rounded mr-5 px-5 py-2" name="s_name" value="{{$s_name}}">
        <select name="group" id="" class="border px-5 py-2 inline-block mr-5">
            <option value="0" @if($group_id==0) selected @endif>All groups</option>
            @foreach($groups as $group)
                <option value="{{$group->id}}" @if($group_id==$group->id) selected @endif>{{$group->name}}</option>
            @endforeach
        </select>
            <label for="">Show </label>
            <select name="count_per_page" id="" class="border px-5 py-2 inline-block mx-1">
                <option value="5" @if($count_per_page==5) selected @endif>5</option>
                <option value="10" @if($count_per_page==10) selected @endif>10</option>
                <option value="15" @if($count_per_page==15) selected @endif>15</option>
                <option value="20" @if($count_per_page==20) selected @endif>20</option>
            </select>
            <label for="">Contacts per page</label>
            <input type="hidden" name="page">
            <input type="hidden" name="order_by" value="{{$order_by}}">
            <input type="hidden" name="order" value="{{$order}}">
        </form>
        <p class="mt-2">There are {{$contacts->count()}} contacts in the list</p>
        <table class="w-[100%] mt-1 mb-5">
            <thead>
                <tr>
                    <th class="cursor-pointer sortable select-none" data-col-name="id" data-order="@if($order_by=='id'){{$order}}@endif">ID<span class="inline-block ml-2 @if($order_by!='id') hidden @endif"><i class="fa-solid fa-sort-{{$order}}"></i></span></th>
                    <th class="cursor-pointer sortable select-none" data-col-name="first_name" data-order="@if($order_by=='first_name'){{$order}}@endif">First Name<span class="inline-block ml-2 @if($order_by!='first_name') hidden @endif"><i class="fa-solid fa-sort-{{$order}}"></i></span></th>
                    <th class="cursor-pointer sortable select-none" data-col-name="last_name" data-order="@if($order_by=='last_name'){{$order}}@endif">Last Name<span class="inline-block ml-2 @if($order_by!='last_name') hidden @endif"><i class="fa-solid fa-sort-{{$order}}"></i></span></th>
                    <th class="cursor-pointer sortable select-none" data-col-name="title" data-order="@if($order_by=='title'){{$order}}@endif">Title<span class="inline-block ml-2 @if($order_by!='title') hidden @endif"><i class="fa-solid fa-sort-{{$order}}"></i></span></th>
                    <th>Contact Records</th>
                    <th>Groups</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach($contacts as $c)
                    <tr>
                        <td>{{$c->id}}</td>
                        <td>{{$c->first_name}}</td>
                        <td>{{$c->last_name}}</td>
                        <td>{{$c->title}}</td>
                        <td>
                            @foreach($c->contact_records as $cr)
                                <p>{{$cr->method->name}}: {{$cr->record}}</p>
                            @endforeach
                        </td>
                        <td>
                            @foreach($c->groups as $g)
                                <p>{{$g->name}}</p>
                            @endforeach
                        </td>
                        <td>
                            <a href="" class="edit border p-2 text-gray-400 hover:bg-sky-300 hover:text-gray-700" data-id="{{$c->id}}">Edit</a>
                            <a href="" class="delete border p-2 text-gray-400 hover:bg-red-300 hover:text-gray-700" data-id="{{$c->id}}">Delete</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="mb-[50px] pager">{{$contacts->links()}}</div>

    <script>
        $('select[name="group"]').addEventListener('change',(e)=>{
            $('form').submit();
        })
        $('input[name="s_name"]').addEventListener('search',(e)=>{
            $('form').submit();
        })
       $('select[name="count_per_page"]').addEventListener('change',(e)=>{
            $('form').submit();
        })
        $$('.pager a').forEach((el)=>{
            el.addEventListener('click',(e)=>{
                e.preventDefault();
                let url = new URL(e.currentTarget.href); // http://server.com/?page=xxx
                let page = url.searchParams.get('page');
                if(page){
                    document.querySelector('input[name="page"]').value = page;
                    document.querySelector('form').submit();
                }
            })
        })
        $$('.delete').forEach((el)=>{
            el.addEventListener('click',(e)=>{
                e.preventDefault();

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!',
                        allowOutsideClick: false
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Swal.fire(
                            //     'Deleted!',
                            //     'Your file has been deleted.',
                            //     'success'
                            // )
                            window.location = '/delete-contact?id='+e.target.dataset.id;
                        }
                    })
                // if(confirm("Are you sure?")){
                //     window.location = '/delete-contact?id='+e.target.dataset.id;
                // }
            })
        })

        $$('.sortable').forEach((el)=>{
            el.addEventListener('click',(e)=>{
                $('input[name="order_by"]').value = e.currentTarget.dataset.colName
                let order = e.currentTarget.dataset.order
                if(!order) order = 'down'
                else if(order==='down') order = 'up'
                else order='down'
                $('input[name="order"]').value = order;
                $('form').submit();
            },true)
        })
        @if($message)
        Swal.fire({
            title: 'Message',
            html: '{{$message}}',
            timer: 1500,
            timerProgressBar: true,
        })
            //alert('{{$message}}');
        @endif


    </script>

@endsection
